<template>
	<view id="app">
		<view class="container df fdc">
			<view class="ptb20 bgw f28 c666 pl20">
				上传形象照
			</view>
			<view class="ver bgw pb20">
				<uv-upload :fileList="fileList1" name="1" :deletable="false" :maxCount="1"  @afterRead="afterRead"  :previewFullImage="true" width="280rpx" height="420rpx">
					<image :src="member.avatar" mode="widthFix" style="width: 280rpx;height: 420rpx;" v-if="member.avatar"></image>
					<image :src="avbg" mode="widthFix" style="width: 280rpx;height: 420rpx;" v-else></image>
				</uv-upload>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="w150 f28 c666 pl20">姓名</view>
					<view class="f1">
						<uv-input placeholder="输入姓名" border="none" v-model="member.name"></uv-input>
					</view>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="w150 f28 c666 pl20">学历</view>
					<view class="f1" @click="openedu">
						<uv-input placeholder="请选择学历" disabled disabledColor="#fff" border="none" v-model="eduTxt" suffixIcon="arrow-right" ></uv-input>
					</view>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="w150 f28 c666 pl20">工作年限</view>
					<view class="f1" @click="openwork">
						<uv-input placeholder="请选择年限" disabled disabledColor="#fff" border="none" v-model="workTxt" suffixIcon="arrow-right" ></uv-input>
					</view>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="w150 f28 c666 pl20">擅长技能</view>
					<view class="f1">
						<uv-checkbox-group v-model="checkboxValue" placement="row" labelColor="#666" @change="changeTags">
							<uv-checkbox v-for="(item, index) in tags" :key="index" :label="item.tags_name" :name="String(item.id)" :customStyle="{padding:'15rpx'}"></uv-checkbox>
						</uv-checkbox-group>
					</view>
			</view>
			<view class="rows bgw ptb20 bdb1s brcce">
				<view class="w150 f28 c666 pl20">地址</view>
					<view class="f1" @click="openaddress">
						<uv-input placeholder="请选择地址" disabled disabledColor="#fff" border="none" v-model="addressTxt" suffixIcon="arrow-right" ></uv-input>
					</view>
			</view>
			<view class="ptb20 bgw f28 c666 pl20">
				技能证书
			</view>
			<view class="ver bgw pb20">
				<uv-upload :fileList="fileList2" name="2" :deletable="false" :maxCount="1"  @afterRead="afterRead"  :previewFullImage="true" width="480rpx" height="320rpx">
					<image :src="member.great_images" mode="widthFix" style="width: 480rpx;height: 320rpx;" v-if="member.great_images"></image>
					<image :src="jnzs" mode="widthFix" style="width: 480rpx;height: 320rpx;" v-else></image>
				</uv-upload>
			</view>
			<view class="df fdc aic mt20">
				<view class="btn">
					<uv-button color="#145cfe" iconColor="#fff" @click="handelMember()" text="提交审核"></uv-button>
				</view>
			</view>
		</view>
		<uv-picker ref="edu" :columns="eduitems" keyName="name" :defaultIndex="eduindex" @confirm="educonfirm"></uv-picker>
		<uv-picker ref="work" :columns="workitems" keyName="name" :defaultIndex="workindex" @confirm="workconfirm"></uv-picker>
		<uv-picker ref="address" :columns="addressList" keyName="name" @change="changeRegion" @confirm="addressconfirm"></uv-picker>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				loading: true,
				avbg:this.util.config.host+'/static/images/avbg.jpg',
				jnzs:this.util.config.host+'/static/images/jnzs.jpg',
				tags:[],
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				eduindex:0,
				workindex:0,
				defaultValue: [110000, 110100, 110101],
				fileList1:[],
				fileList2:[],
				checkboxValue:[],
				eduTxt:"",
				workTxt:"",
				addressTxt:"",
				eduitems:[
					[{id:'1',name:'初中及以下'},
					{id:'2',name:'高中'},
					{id:'3',name:'专科'},
					{id:'4',name:'本科'},
					{id:'5',name:'硕士及以上'}]
				],
				workitems:[
					[{id:'1',name:'3年以下'},
					{id:'2',name:'3-5年'},
					{id:'3',name:'5-10年'},
					{id:'4',name:'10年以上'}]
				],
				member:{
					name:"",
					avatar:"",
					edu:"",
					workage:"",
					tags:"",
					great_images:"",
					province:"",
					city:"",
					area:"",
					province_code:"",
					city_code:"",
					area_code:"",
				}
			}
		},
		onLoad(){
			that = this;
			this.getTags();
			this.getRegion();
			this.getMemberInfo();
		},
		computed:{
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		methods: {
			handelMember:function(){
				if(this.fileList1.length != 0){
					this.member.avatar = this.fileList1[0].url;
				}
				if(this.fileList2.length != 0){
					this.member.great_images = this.fileList2[0].url;
				}
				if(this.member.avatar ==''){
					this.util.alert('请上传形象照');
					return false;
				}
				if(this.member.name ==''){
					this.util.alert('请填写姓名');
					return false;
				}
				if(this.member.edu ==''){
					this.util.alert('请选择学历');
					return false;
				}
				if(this.member.workage ==''){
					this.util.alert('请选择工作年限');
					return false;
				}
				if(this.checkboxValue.length == 0){
					this.util.alert('请选择擅长技能');
					return false;
				}else{
					this.member.tags = this.checkboxValue.join(',');
				}
				if(this.member.area_code ==''){
					this.util.alert('请选择地址');
					return false;
				}
				this.request({
					url:"/api/user/memberedit",
					data:this.member,
					success:function(rlt){
						if(rlt.code == 200){
							// 弹窗提示
							that.alert('提交成功')
							// 延时执行
							setTimeout(() => {
								uni.navigateBack()
							}, 500);
						}
					}
				})
				
			},
			getTags:function(){
				let that = this;
				this.request({
					url: '/api/index/tags'
				}).then((res)=>{
					if(res.code == 200){
						that.tags = res.data;
					}
				});
			},
			getRegion:function(){
				let that = this;
				this.request({
					url: '/api/index/region'
				}).then((res)=>{
					if(res.code == 200){
						this.provinces = res.data.sort((left, right) => (Number(left.id) > Number(right.id) ? 1 : -1));
						console.log(this.provinces);
						this.handlePickValueDefault();
						setTimeout(() => {
							this.loading = false
						}, 200)
					}
				});
			},
			handlePickValueDefault() {
				console.log(this.defaultValue);
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]);
				// 重置下位置
				this.$refs.address.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],true);
			},
			changeTags(e){
				console.log(e);
			},
			changeRegion(e) {
				if (this.loading) return;
				const { columnIndex, index, indexs } = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.address.setIndexs([index, 0, 0],true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.address.setIndexs(indexs,true)
				}
			},
			openaddress() {
				this.$refs.address.open();
				this.handlePickValueDefault()
			},
			addressconfirm(e) {
				this.member.province_code = e.value[0].id;
				this.member.province = e.value[0].name;
				this.member.city_code = e.value[1].id;
				this.member.city = e.value[1].name;
				this.member.area_code = e.value[2].id;
				this.member.area = e.value[2].name;
				that.defaultValue[0] =that.member.province_code;
				that.defaultValue[1] =that.member.city_code;
				that.defaultValue[2] =that.member.area_code;
				that.addressTxt = that.member.province+'/'+that.member.city+"/"+that.member.area;
			},
			openedu:function(){
				this.$refs.edu.open();
			},
			educonfirm(e){
				console.log(e);
				this.eduindex = e.indexs[0];
				this.eduTxt = e.value[0].name;
				this.member.edu = e.value[0].id;
			},
			openwork:function(){
				this.$refs.work.open();
			},
			workconfirm(e){
				this.workindex = e.indexs[0];
				this.workTxt = e.value[0].name;
				this.member.workage = e.value[0].id;
			},
			getMemberInfo:function(){
				this.request({
					url:"/api/user/member",
					success:function(rlt){
						if(rlt.code == 200){
							that.member = rlt.data;
							that.eduindex = that.eduitems[0].findIndex(item=> Number(item.id) === Number(that.member.edu));
							console.log(that.eduindex);
							that.workindex = that.workitems[0].findIndex(item=> Number(item.id) === Number(that.member.workage));
							console.log(that.workindex);
							console.log(that.eduitems);
							that.eduTxt = that.eduitems[0][that.eduindex].name;
							that.workTxt = that.workitems[0][that.workindex].name;
							that.addressTxt = that.member.province+'/'+that.member.city+"/"+that.member.area;
							that.defaultValue[0] =that.member.province_code;
							that.defaultValue[1] =that.member.city_code;
							that.defaultValue[2] =that.member.area_code;
							if(that.member.tags){
								that.checkboxValue = String(that.member.tags).split(",");
								console.log(that.checkboxValue);
							}
							 
						}
					}
				})
			},
			uploadfile:function(url,res){
				return new Promise((resolve, reject) => {
					let imgurl = '';
					this.qnUpload.upload(url,function(rlt){
						imgurl = rlt.imageURL
						
					},function(e){
					},{
						region: 'NCN',
						uptoken: res.data.token,
						key:res.data.filename,
					});
					setTimeout(() => {
						resolve(res.data.cdnurl+imgurl);
					}, 1000)
				})
			},
			getToken(e){
				console.log(e);
				return this.request({url:"/api/common/qntoken",data:{'file':e}});
			},
			async afterRead (event){
				console.log(event);
				let file =event.file
				this[`fileList${event.name}`][0] = {
					...file,
					status: 'uploading',
					message: '上传中'
				}
				console.log(this[`fileList${event.name}`]);
				let res = await this.getToken(file.url);
				const result = await this.uploadfile(file.url,res)
				console.log(result);
				let item = this[`fileList${event.name}`][0]
				this[`fileList${event.name}`].splice(0, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				console.log()
			},
		}
	}
</script>

<style lang="less" scoped>
.btn{width:480rpx;}
</style>